<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LocalStorage</title>
</head>
<body>
    <script>
        /**
 * 因为原生的localStorage不支持设置有效期的
 * 但是在项目我们很多时候又希望设置有效期
 */
class ExpiringLocalStorage{
  setItem(key,value,expiryInSecond=60){
    //封装一个新的数据项
    const item = {
        value,//这是原始的想保存的值
        expiry:Date.now()+expiryInSecond*1000//过期的时间，格式是毫秒数
    }
    //把包装后的数据项保存在本地存储中
    localStorage.setItem(key,JSON.stringify(item))
  }
  getItem(key){
    //从localStorage中取出数据项字符串
    const itemStr = localStorage.getItem(key);
    //如果没找到，则返回null
    if(!itemStr) return null;
    //然后把数据项字符串还原成对象的形式
    const item = JSON.parse(itemStr);
    //如果当前的时间戳已经 大于此数据项保存的过期的时间戳，那就意味着过期了
    if(Date.now()> item.expiry){
        //删除此数据项
        localStorage.removeItem(key)
        //返回null
        return null;
    }
    //如果没有过期，则返回当前数据项的value值
    return item.value;
  }
}
debugger
let expiringLocalStorage=new ExpiringLocalStorage();
expiringLocalStorage.setItem('age','18',10);
console.log(expiringLocalStorage.getItem('age'))

    </script>
</body>
</html>